<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入样式 -->

  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="../css/style.css">

  <!-- 引入组件库 -->

  <script src="../js/vue.js"></script>

  <script src="../element-ui/lib/index.js"></script>

  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <script src="../js/axios-0.18.0.js"></script>


</head>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    /*text-align: center;*/
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .centered-text{
    text-align: center;
    line-height: 150px;
  }
</style>

<body>
<div id="app">
  <el-container>
    <el-header>
      <h1><i class="el-icon-s-home"></i>{{userInfo.name}}的个人中心</h1>
    </el-header>
    <el-main >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><a href="../index">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col :span="8" >
          <el-card>
            <div slot="header" class="clearfix">
              <span><i class="el-icon-user-solid"></i>个人信息</span>
              <a href="/pages/m.html"><el-button type="text" >私聊</el-button></a>
            </div>
            <div style="height: 510px">
              <el-avatar :src="userInfo.avatar" :size="100" fit="cover"></el-avatar>

              <h2>{{ userInfo.name }}</h2>
              <p>{{ userInfo.bio }}</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-star-on"></i>ta的收藏</span>
            </div>
            <div style="height: 200px">
              <p class="centered-text">{{flag1}}</p>
              <ul>
                <li v-for="(item, index) in favorites" :key="index"><el-link :href="`/ques/detail?qid=${item.qid}`">{{ item.title }}</el-link> </li>
              </ul>
            </div>
          </el-card>
          <el-card>
            <div slot="header">
              <span><i class="el-icon-reading"></i>ta的帖子</span>
            </div>
            <div style="height: 200px">
              <p class="centered-text">{{flag2}}</p>
              <ul>
                <li v-for="(item, index) in resources" :key="index"><el-link :href="`/ques/detail?qid=${item.qid}`">{{ item.title }}</el-link></li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>

  <!-- 编辑个人信息对话框 -->
  <el-dialog :visible.sync="dialogVisible" title="编辑个人信息">
    <el-form :model="editForm" ref="editForm" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model="editForm.nickname"></el-input>
      </el-form-item>
<!--      <el-form-item label="头像链接">-->
<!--        <el-input v-model="editForm.avatar"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="个人简介">
        <el-input type="textarea" v-model="editForm.email"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveInfo">保存</el-button>
    </div>
  </el-dialog>
</div>


<script>
  new Vue({
    el: '#app',
    data: {
      userInfo: {
        uid: '',
        name: '用户名',
        avatar: 'https://via.placeholder.com/150',
        bio: '这是用户的个人简介'
      },
      favorites: ['收藏项1', '收藏项2', '收藏项3'], // 替换成你的收藏数据
      resources: ['资源1', '资源2', '资源3'], // 替换成你的资源数据
      dialogVisible: false,
      editForm: {
        uid: '',
        nickname: '',
        // avatar: '',
        email: ''
      },
      imageUrl: '',
      flag1:'',
      flag2:''
    },
    // mounted() {
    //   this.userInfo.uid = getQueryVariable("uid");
    //   console.log(this.userInfo.uid);
    // },
    created(){
      console.log(sessionStorage.getItem("id"));
      const uid = sessionStorage.getItem("id")

      this.getCollections(uid);
      this.getMyQues(uid);
      this.myUserInfo(uid);
      // console.log(uid);
      // console.log(sessionStorage.length);

    },
    methods: {
      editInfo() {
        this.editForm = {
          uid: this.editForm.uid,
          nickname: this.userInfo.name,
          // avatar: this.userInfo.avatar,
          email: this.userInfo.bio
        };
        this.dialogVisible = true;
      },
      myUserInfo(uid){
        axios.get(`/admin/user?uid=${uid}`).then((res)=>{
          // console.log(res.data.data);
          if(res.data.code == 20041){
            //展示弹层，加载数据
            console.log(res.data);
            this.userInfo.name = res.data.data.nickname;
            this.userInfo.avatar = "../" + res.data.data.avatar;
            this.editForm.uid = res.data.data.uid;

            this.userInfo.bio = res.data.data.email;
            if(res.data.data.email.length == 0){
              this.userInfo.bio = "这个人很懒，还没有个人介绍";
            }

          }else{
            this.$message.error(res.data.msg);
          }
        });
      },
      saveInfo() {
        axios.post('/users/homeUpdate', this.editForm).then((res) => {
          if (res.data.code == 20031) {
            this.$message.success('保存成功');

            this.myUserInfo(this.editForm.uid);
            this.dialogVisible = false;
          } else {
            this.$message.error("保存失败");
          }
        });
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      getCollections(uid){
        axios.get(`/users/myCollection?uid=${uid}`).then((res)=>{
          console.log(res.data.data);
          this.favorites = res.data.data;

          if(res.data.data.length == 0){
            this.flag1 = "您的收藏空空如也";
          }
        });
      },
      getMyQues(uid){
        axios.get(`/users/myQues?uid=${uid}`).then((res)=>{
          console.log(res.data.data);
          this.resources = res.data.data;

          if(res.data.data.length == 0){
            this.flag2 = "您的帖子空空如也";
          }
        });
      }
    }
  });
</script>
</body>
</html>